
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .b1{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .b2{
            height: 300px;
            background-color: yellow;
        }

    </style>

    <script type="text/javascript">

        window.onload = function(){
            //获取box
            var box = document.getElementById("box");
            //获取btn01
            var btn01 = document.getElementById("btn01");

            //为btn01绑定单击响应函数
            btn01.onclick = function(){
                //修改box的样式
                /*
                 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
                 * 	这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
                 */
                /*box.style.width = "200px";
                box.style.height = "200px";
                box.style.backgroundColor = "yellow";*/

                /*
                 * 我希望一行代码，可以同时修改多个样式
                 */

                //修改box的class属性
                /*
                 * 我们可以通过修改元素的class属性来间接的修改样式
                 * 这样一来，我们只需要修改一次，即可同时修改多个样式，
                 * 	浏览器只需要重新渲染页面一次，性能比较好，
                 * 	并且这种方式，可以使表现和行为进一步的分离
                 */
                //box.className += " b2";
                //addClass(box,"b2");

                //alert(hasClass(box,"hello"));

                //removeClass(box,"b2");

                toggleClass(box,"b2");
            };

        };

        //定义一个函数，用来向一个元素中添加指定的class属性值
        /*
         * 参数:
         * 	obj 要添加class属性的元素
         *  cn 要添加的class值
         *
         */
        function addClass(obj , cn){

            //检查obj中是否含有cn
            if(!hasClass(obj , cn)){
                obj.className += " "+cn;
            }

        }

        /*
         * 判断一个元素中是否含有指定的class属性值
         * 	如果有该class，则返回true，没有则返回false
         *
         */
        function hasClass(obj , cn){

            //判断obj中有没有cn class
            //创建一个正则表达式
            //var reg = /\bb2\b/;
            var reg = new RegExp("\\b"+cn+"\\b");

            return reg.test(obj.className);

        }

        /*
         * 删除一个元素中的指定的class属性
         */
        function removeClass(obj , cn){
            //创建一个正则表达式
            var reg = new RegExp("\\b"+cn+"\\b");

            //删除class
            obj.className = obj.className.replace(reg , "");

        }

        /*
         * toggleClass可以用来切换一个类
         * 	如果元素中具有该类，则删除
         * 	如果元素中没有该类，则添加
         */
        function toggleClass(obj , cn){

            //判断obj中是否含有cn
            if(hasClass(obj , cn)){
                //有，则删除
                removeClass(obj , cn);
            }else{
                //没有，则添加
                addClass(obj , cn);
            }

        }

    </script>
</head>
<body>

<button id="btn01">点击按钮以后修改box的样式</button>

<br /><br />

<div id="box" class="b1 b2"></div>
</body>
</html>